'use client'; 

import React, { useState, useEffect } from 'react';
import { formatTime } from '../../utils/index';
import {
  Decoration10,
  Decoration8,
  Decoration6,
} from '@jiaminghi/data-view-react';

import { TopBox, TimeBox } from './style';

const IndexPage = () => {
  const [title] = useState('大数据可视化平台');
  const [timeStr, setTimeStr] = useState('');
  const weekday = [
    '星期天',
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五',
    '星期六',
  ];

  // 设置时间
  useEffect(() => {
    const timing = setInterval(() => {
      let dateYear = formatTime(new Date(), 'yyyy-MM-dd');
      let dateDay = formatTime(new Date(), 'HH: mm: ss');
      let dateWeek = weekday[new Date().getDay()];
      setTimeStr(`${dateYear} | ${dateDay} ${dateWeek}`);
    }, 1000);

    // 清除定时器
    return () => clearInterval(timing);
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <TopBox>
      <div className='top_box'>
        <Decoration10 className='top_decoration10' />
        <div className='title-box'>
          <Decoration8
            className='top_decoration8'
            color={['#568aea', '#000000']}
          />
          <div className='title'>
            <span className='title-text'>{title}</span>
            <Decoration6
              className='title-bototm top_decoration6'
              reverse={true}
              color={['#50e3c2', '#67a1e5']}
            />
          </div>

          <Decoration8
            reverse={true}
            className='top_decoration8'
            color={['#568aea', '#000000']}
          />
        </div>
        <Decoration10 className='top_decoration10 top_decoration10_reverse' />
        <TimeBox>
          <h3>{timeStr}</h3>
        </TimeBox>
      </div>
    </TopBox>
  );
};

export default IndexPage;
